<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="parent">
        <p>原本就有的子标签</p>
    </div>

    <h3 id="other">原本就有的标签</h3>

    <script>
        // 1. 创建标签
        const newDiv = document.createElement("div");

        const parent = document.querySelector('#parent');
        const other = document.querySelector('#other');

        // 将内存中的新标签，添加到parent到第一个儿子
        // parent.prepend(newDiv);
        // 将页面中存在的标签，移动到parent到第一个儿子
        // parent.prepend(other);

        // 将内存中的新标签，添加到parent到最后一个儿子
        // parent.append(newDiv);
        // 将页面中存在的标签，移动到parent到最后一个儿子
        // parent.append(other);


        // 将内存中的新标签，添加到parent的前面（兄弟关系）
        // parent.before(newDiv);
        // 将页面中存在的标签，移动到parent的前面（兄弟关系）
        // parent.before(other);
        // 将内存中的新标签，添加到parent的后面（兄弟关系）
        // parent.after(newDiv);
        // 将页面中存在的标签，移动到parent的后面（兄弟关系）
        // parent.before(other);

        // 删除
        // parent.remove();

        // 复制
        // const newParent = parent.cloneNode(true);
        // console.log(newParent);

        // 替换: 旧标签.replaceWith(新标签)
        parent.replaceWith(newDiv);
        
    </script>
</body>

</html>